import React from 'react'

// connect redux和组件的连接
import { connect } from 'react-redux'
import { setText, EditCount, fetchTodosSuccess } from '../actions/index'
import AddTodo from './addTo'
import ToDoList from './todoList'
import './index.css'
class TodoInex extends React.Component {
  constructor(props) {
    super(props)
  }
  changeCount = () => {
    this.props.EditCount(5)
  }
  componentDidMount () { //组件挂载完成 请求数据
    fetch("https://pcapi-xiaotuxian-front.itheima.net//goods/hot", {
      method: "get",
      // body: {} //发送数据
    }).then(res => res.json()).then(data => {
      console.log(data)
      // 触发了actions 并传送数据
      this.props.fetchTodosSuccess(data.result)
    })

  }
  render () {
    let { text, count, list } = this.props;
    console.log(this.props.list);
    return (
      <div>
        <h1>每日任务清单</h1>
        <h1>{text}</h1>
        <h1>计数器：{count}</h1>
        <button onClick={this.changeCount}>每次加5</button>
        <hr />
        <AddTodo />
        <hr />
        <ToDoList />
        <hr />
        <div className='listWrap'>
          {list.map((item, index) => <div className="list_one" key={item.id}>
            <img src={item.picture} />
            <h2>{item.name}</h2>
            <h3>{item.desc}</h3>
            <h2>{item.price}</h2>
          </div>
          )}
        </div>
      </div>
    )
  }

}

// todoList 主页进行链接redux 

// 导出一个视图容器 并 连接到redux 
// 1. 将redux的state注入到组件的props 
let mapStateToProps = (state) => ({
  count: state.count,
  todos: state.todos,
  text: state.text,
  list: state.list//
})
// 2. 将redux的actions方法的触发 注入到了props
//
let mapDispatchToProps = (dispatch) => ({
  EditCount: (num) => dispatch(EditCount(num)),
  setText: (text) => dispatch(setText("睡觉")),
  fetchTodosSuccess: (data) => dispatch(fetchTodosSuccess(data))
})
// mapStateToProps  mapDispatchToProps 返回一个对象
//                                                           //组件
export default connect(mapStateToProps, mapDispatchToProps)(TodoInex)